简介

Obsidian 是很多人在用的本地知识库工具，但官方 Web Clipper 对 B站并不友好。 这期视频分享一个自己做的小插件：Bilibili Obsidian Clipper。

它可以在 B站视频页面直接获取字幕内容，支持作者字幕和 AI 字幕，多语言可选，还能复制 Markdown、下载 txt / srt，一键写入 Obsidian 指定目录。这样就可以把收藏的内容沉淀到本地知识库里，再交给 AI 继续整理、总结和搜索。

edge 插件市场上线；（不给放🔗，需要搜索下名称） chrome 插件市场上线： https://chromewebstore.google.com/detail/jokophbofiphenlplmohabdcmalcbenl?utm_source=item-share-cb （由于是新上架插件，开启了‘增强型安全浏览’的用户可能会看到警告，请放心点击继续）

项目地址：https://github.com/haixiong1997/Bilibili-Obsidian-Clipper

章节

• 00:00 引言
• 01:27 插件功能介绍
• 02:20 安装步骤
• 05:39 结合 AI
• 06:55 过程分享

字幕

引言 00:00

00:00 obsidian 00:00 是最近很火的一款本地知识库软件 00:03 因为它可以接入AI模型 00:04 并且知识存储在本地 00:06 同时 00:06 它还有一个非常必要的浏览器插件 00:09 叫做obsidian Web Clipper 00:11 它可以将任意的网页上的内容 00:13 比如个人博客x文章等等 00:15 通过这一个插件 00:16 直接保存成Markdown格式 00:18 存储在本地 00:19 甚至油管视频也可以 00:21 当然前提是需要有字幕 00:23 但是它不支持 00:24 国内最大的知识学习平台bilibili 00:27 在b站页面使用obsidian web clipper 00:29 只会得到你不想要的内容 00:31 因为它没有对b站做任何适配 00:33 但我又很需要这样的一个场景 00:35 因为收藏夹打开的概率很低 00:37 第二不方便搜索 00:39 第三收藏的内容可能会消失 00:41 所以如果能够保存在本地 00:43 并且加上AI大模型 00:45 那我以后无论是搜索还是学习 00:47 都可以在本地完成 00:48 我需要一个obsidian Web clipper for bilibili 00:51 它可以在b站的视频页面 00:53 点击这个拓展插件 00:54 就能够抓取当前视频的字幕内容 00:57 并且 00:57 可以一键添加obsidian指定的目录中 01:00 这样我就可以让AI来概述它的内容 01:02 并且在我以后需要它的时候 01:04 都能够搜索到 01:07 这个就是今天想要和大家分享的插件 01:09 我把它叫做bilibili obsidian Clipper 01:12 是我最近使用Codex这款AI编程软件 01:14 vibe coding出来的产品 01:16 作为一个没有从事过代码工作 01:18 不懂代码逻辑的人来说 01:19 我觉得这个插件还是比较好用的 01:22 接下来我将介绍如何使用安装 01:24 以及vibe coding过程中的一些心得体会

插件功能介绍 01:27

01:28 首先来介绍一下它能干什么 01:30 核心功能其实非常简单 01:32 在任何有字幕的视频界面 01:35 点击这个插件 01:36 它就会获取这个视频的字幕文件 01:39 包括作者上传的字幕 01:40 以及AI生成的字幕 01:42 如果字幕有多语言版本的话 01:44 也可以选择具体的语言版本 01:46 预览的内容也会同时发生改变 01:49 点击刷新按钮 01:50 它会重新获取一遍 01:51 点击复制按钮 01:53 它会复制完整的Markdown内容 01:55 可以在任何可以输入的地方粘贴进去 01:58 包括这个视频的视频简介 02:00 章节信息以及字幕内容 02:02 点击下载按键 02:03 可以下载srt格式 02:05 或者txt格式的文本内容 02:07 方便上传附件给AI 02:09 比如Touchnote 02:10 或Notebook l m这类的笔记工具 02:13 点击保存到Ob 02:14 它就会保存到指定的目录 02:16 那我这里是在clipping下的bilibili文件夹

安装步骤 02:20

02:21 接下来介绍如何使用 02:23 目前我已经申请了上架 02:25 Chrome和edge的浏览器插件 02:27 但是审核还需要一定的时间 02:29 同时我也把它开源到了GitHub上面 02:31 如果你想要使用或者做一些修改的话 02:34 都可以在Readme这里也做了具体的 02:37 使用说明 02:38 我们先来下载一下当前的版本 02:41 点击这里进入到下载的界面 02:43 需要下载一个V1.0的压缩文件夹 02:46 下载好了之后 02:47 在任意的本地目录进行解压 02:50 它里面主要就是一些项目的文件 02:53 然后我们来到浏览器 02:55 打开Chrome的拓展插件页面 02:57 需要开启开发者模式 02:59 然后点击加载未打包的拓展程序 03:03 选中解压后的拓展目录 03:05 点击一下选择 03:06 那这样的话这个插件就可以使用了 03:09 最好在右上角拓展这里 03:11 把这个插件置顶 03:12 这样的话会方便调用 03:15 接下来来到b站的界面 03:17 随便找一个带字幕的视频 03:19 然后点击插件 03:20 就能够获取到这个字幕信息 03:23 如果提示出错 03:24 或者有字幕但是没有获取到的话 03:26 就要刷新一下这个视频网页 03:28 重新点一下插件应该就可以了 03:31 复制和下载是不需要任何设置 03:33 都可以完成的 03:35 但是保存到ob中 03:36 需要借助一个工具 03:38 我们点一下保存 03:39 第一次会来到这个设置页面 03:42 第一个 03:42 是需要保存到知识库的哪个文件夹 03:45 下面默认是clipping下的bilibili文件夹 03:48 但是是可以自己修改的 03:50 然后会有一个local rest API地址和API k 03:54 你可能会好奇这是什么东西 03:56 正好可以同时介绍一下 03:58 这个插件是怎么实现 03:59 在网页上点击添加到OB 04:01 就可以在本地新增一篇文档的 04:04 那下面的话也有具体的步骤指导 04:07 local rest API它是ob的一个第三方插件 04:11 大概有30万的下载量 04:13 在GitHub上有2,000个star 04:15 它的作用是 04:16 给ob开一个本地直连的接口 04:19 让浏览器插件或者脚本 04:21 可以直接把md文件写入知识库中 04:24 而不是走手动复制粘贴的路 04:26 我们给这个插件发请求 04:28 就可以实现增删改查这样的操作 04:30 并且是比较稳定的 04:33 安装好这个插件之后 04:34 需要勾选这里来开启一下HTTP服务 04:37 因为这里需要27123这个接口 04:40 之所以不用上面的这个接口 04:42 是因为走加密传输麻烦一点 04:44 需要下载证书导入系统钥匙串 04:47 但如果只是个人电脑加本地使用的话 04:49 是不太需要走加密传输的 04:52 如果想要使用HTTPS的端口 04:54 具体的方法可以参考这个步骤 04:57 我这里就不演示了 04:58 我自己测试是没有问题的 05:00 那Windows的版本我没有测试过 05:03 具体可以看它的这个wiki的介绍 05:06 它这里有具体的操作说明 05:08 我们需要复制一下这串apik 05:10 然后粘贴到浏览器插件这里 05:12 下面的默认标签 05:14 下载格式以及笔记属性等等 05:17 根据个人的需要选择就可以了 05:19 随时都可以更改 05:20 那都设置好之后 05:21 点击保存 05:23 提示保存成功之后 05:24 我们回到视频这里 05:26 点击保存到Obsidian就可以成功了 05:29 提示已写入 05:30 然后打开Obsidian对应的目录 05:32 就能够找到刚刚保存的内容了 05:34 有简介有目录 05:35 并且视频链接是嵌入到笔记当中的

结合 AI 05:39

05:40 有了内容之后 05:41 剩下的工作交给AI就可以了 05:43 你可以利用Terminal这个插件 05:45 在obsidian里面 05:46 直接使用终端命令来调用claude 05:48 或者直接使用 05:50 claudian 这个插件能够更方便地使用claude 05:53 我这里让他帮我格式化整理这篇文档 05:56 那他就会按照我之前给他的要求 05:58 进行工作 05:59 需要等待一会 06:01 他会生成一个格式化的笔记内容 06:03 并且移动到指定的文件夹 06:07 我的这个文件夹叫做c c内容 06:09 用来保存所有AI生成的文章 06:11 我们来看一下 06:14 那这种格式化的内容 06:16 相比于之前纯文本的脚本文件 06:18 要好很多 06:19 很易读也更方便 06:22 并且之前的原文件也并没有删除 06:25 而是放在了一个已归档的文件夹 06:27 以防后面还会再需要 06:31 之所以能这么做 06:31 是因为在ob里面 06:33 写了一个claude.md的文件 06:36 那这里就具体要求了输出的规范 06:38 如果是外语的话 06:39 也有翻译的要求 06:41 所以无论下载什么的语言字幕都OK 06:44 那这里还有格式的要求 06:46 命名的要求 06:47 输出位置的要求等等 06:48 有了这个Markdown文件之后 06:50 就能让AI更准确地理解我下达的指令 06:53 并且具体操作

过程分享 06:55

06:56 最后再来分享一下 06:57 使用codex编程过程中遇到的一些问题 07:00 以及是怎么解决的 07:02 因为开发的是比较小的项目 07:04 功能也比较简单和单一 07:06 对我来说难度还可以 07:07 但是也遇到了一些实际的问题 07:10 最主要的问题是获取字幕的时候 07:12 经常获取到不相干的字幕文件 07:14 或者这个视频明明没有字幕文件 07:16 但是获取到了一个字幕 07:18 那这是一个很明显的bug 07:20 每次Codex说想到一个解决方案 07:22 去修改的时候 07:24 等他改完 07:25 那这个问题还在 07:26 来回拉扯了好几轮之后 07:27 然后我尝试的另一个办法 07:29 就是换一个模型来解决 07:31 编程最厉害的模型 07:32 大家公认的是claude的自家模型 07:35 但是我并没有开通他们的会员 07:37 但是谷歌的Antigravity里面 07:39 有Opus 4.5的免费额度 07:41 然后就用Antigravity这个软件 07:43 去打开这个项目的项目文件 07:46 然后让opus 4.5 07:47 来分析我们目前遇到的问题 07:49 给出一个解决方案 07:51 那正所谓你这个AI不干 07:52 有的是别的AI来干 07:54 那拿到了opus 4.5的分析结果之后 07:57 并没有让他直接的来修改代码 07:59 而是把这个分析方案给到了Codex 08:02 让他分析一下是否可行 08:04 然后Codex给了一些优化之后 08:06 那这个问题才得到解决 08:08 第二个问题就是本来插件已经写好了 08:11 最后让codex检查下有哪些冗余的代码 08:14 让它优化一下 08:15 那本来好的功能 08:16 结果优化完了之后又不能用了 08:19 那幸好之前使用了git来管理版本 08:21 然后就回退到了之前的版本 08:24 我之前总觉得git用起来很麻烦 08:26 但实际上是不需要自己去做的 08:28 因为AI在这个过程中它会自动帮你做 08:31 这样的话能够降低不少的风险 08:34 好了 08:34 那以上就是本期视频的全部内容了 08:36 如果觉得对你有帮助的话 08:38 还请一键三连支持一下 08:40 我们下期视频再见拜拜